/*
* @Author: lenovo
* @Date:   2017-12-09 08:41:22
* @Last Modified by:   lenovo
* @Last Modified time: 2017-12-12 15:50:28
*/
var page={
	wrap:document.getElementsByClassName("wrap")[0],
	nav:document.getElementsByClassName("nav")[0],
	navLis:document.getElementsByClassName("nav-li"),
	mainNavLis:document.getElementsByClassName("main-nav-li"),
	//屏幕可见高度
	avaiH:document.documentElement.clientHeight,
	//侧边导航
	navSide:document.getElementsByClassName("nav-side")[0],
	//获取内容部分
	content:document.getElementsByClassName("content")[0],
	// 内容区域右侧放置图片div
	imgDiv:document.getElementsByClassName("img-div")[0],
	//content-part
	contentParts:document.getElementsByClassName("content-part"),
	//获取侧边导航li
	navSideLis:document.getElementsByClassName("nav-side-li"),
	//activeli
	activeLi:document.getElementsByClassName("active-li")[0],
	returnIndex:document.getElementsByClassName("return-index")[0],
	goIndex:document.getElementsByClassName("go-index")[0],
	filters : {
			"jpeg": "/9j/4",
			"png": "iVBORw"
	},
	// 预览图片的盒子
	getPicsAreaWrap:document.getElementsByClassName('pics-area-wrap')[0],
	getPicsArea:document.getElementsByClassName("pics-area"),
	// 上传照片按钮
	getUploadPicBtn:document.getElementsByClassName("upload-pic")[0],	
	// 上传图片按钮以及预览、结果区域
	recoResultWrap:document.getElementsByClassName("reco-result-wrap")[0],
	//所有的span
	spanTag:document.getElementsByClassName("right"),
	iTag:document.getElementsByClassName("hide-li")[0],
	
	// 第几次点击侧边导航i
	flag:0,
	init:function(){
		HTMLCollection.prototype.toArray=function(){
            return [].slice.call(this);
        }
		//根据浏览器大小渲染页面，最小宽度为360px
		this.renderPage();
		this.addEvent();
	},
	addEvent:function(){
		var _this=this;
		// 为每一个侧边导航添加一个click，触发时隐藏当前内容，先是对应内容
		this.navSideLis.toArray().forEach(function(curr,index){
			curr.addEventListener('click',function(){
				_this.open(curr,index);
				_this.flag+=1;
			});
			if(document.documentElement.clientHeight>544){
				//聚焦时，字体图标箭头向下
			curr.addEventListener('mouseover',function(){
				// console.log(_this.spanTag[index]);
				_this.spanTag[index].className="glyphicon glyphicon-menu-down right";
				// _this.spanTag[index].style.color="glyphicon glyphicon-menu-bottom";
			});
			curr.addEventListener('mouseleave',function(){
				_this.spanTag[index].className="glyphicon glyphicon-menu-right right";
			});
			}
		});
		//三个超链接，进入对应页面
		this.mainNavLis[0].addEventListener("click",function(){
			_this.go("faceReco.html");
		});
		this.mainNavLis[1].addEventListener("click",function(){
			_this.go("faceCheck.html");
		});
		this.mainNavLis[2].addEventListener("click",function(){
			_this.go("gestureCheck.html");
		});
		this.returnIndex.addEventListener("click",function(){
			_this.go("index.html");
		});
		this.goIndex.addEventListener("click",function(){
			_this.go("index.html");
		});
		//上传照片
		this.getUploadPicBtn.addEventListener('change',this.openFile.bind(this));
		//点击i侧边导航前四个导航项折叠
		this.iTag.addEventListener('click',function(){
			if(_this.flag==0){
				//向上折叠
				_this.navSideLis.toArray().forEach(function(curr,index){
					curr.style.display="none";
				});
				document.getElementsByTagName("i")[0].className="glyphicon glyphicon-triangle-bottom";
				_this.flag=1;
			}else{
				// 展开
				_this.navSideLis.toArray().forEach(function(curr,index){
					curr.style.display="block";
				});
				_this.flag=0;
				document.getElementsByTagName("i")[0].className="glyphicon glyphicon-triangle-top";
			}
		});
	},
	openFile:function(){
		//选择图片并预览。
		var tip = "请上传jpg、png格式的图片";//提示消息
		// this.getPicsAreaWrap.innerHTML = "";
		var _this = this;
		if(window.FileReader){
			// console.log(_this.getUploadPicBtn.files);
			for(var i=0,f;f=_this.getUploadPicBtn.files[i];i++){
				var fr = new FileReader();
				fr.onload = function(e){
					// alert(_this);  // this 指向FileReader
					var src=e.target.result;
					if(!_this.validateImg(src)){
						alert(tip);
					}
					else{
						_this.showPrvImg(src);
					}
				}
				fr.readAsDataURL(f);
			}
		}
		else{
				if(!/\.jpg$|\.png$|\.gif$|/i.test(_this.getUploadPicBtn.value)){
					alert(tip);
				}
				else{
					_this.showPrvImg(_this.getUploadPicBtn.value);
				}
		}
	},
	validateImg:function(data){
		var pos=data.indexOf(",")+1;
		for(var e in this.filters){
			if(data.indexOf(this.filters[e]) === pos){
				return e;
			}
		}
		return null;
	},
	showPrvImg:function(src){
		var img = document.createElement("img");
		img.src = src;
		img.width=165;
		img.height = 200;
		this.getPicsAreaWrap.appendChild(img);
	},
	go:function(url){
		// alert(url);
		window.location.href=url;
	},
	open:function(obj,para){
		var _this=this;
		//遍历所有content-part，设置display：none,如果索引==para，则block，表示显示当前
		var conWidth=this.contentParts[0].offsetWidth;
		var conHeight=this.contentParts[0].offsetHeight;
		this.contentParts.toArray().forEach(function(curr,index){
			curr.style.display="none";
			curr.style.height=0+"px";
			if(index==para){
				curr.style.display="block";
				curr.style.height=_this.navSide.offsetHeight+'px';
			}
		});
		_this.navSideLis.toArray().forEach(function(curr,index){
			curr.style.height=1.6+"rem";
			curr.style.lineHeight=1.6+"rem";
			curr.style.backgroundColor="rgb(252,252,252)";
			curr.style.color="rgb(0, 52, 102)";
			//遍历所有侧边导航li，清除之前的高度背景色。并设置当前的
			if(index==para){
				curr.style.height="1.93rem";
				curr.style.lineHeight="1.93rem";
				curr.style.backgroundColor="rgb(42, 48, 60)";
				curr.style.color="white";
			}
		});
	},
	renderPage:function(){
		var _this=this;
		//最外包裹层（class=wrap）宽度
		var wwidth=this.wrap.offsetWidth;
		var btntext=document.getElementsByClassName("btn-text")[0];
		var btnuploaddiv=document.getElementsByClassName("btn-upload")[0];
		var filebtn=document.getElementsByClassName("upload-pic")[0];
		btntext.style.marginLeft=-(btntext.offsetWidth+(btnuploaddiv.offsetWidth-btntext.offsetWidth)/2)+"px";
		btntext.style.marginTop=30+"px";
		btntext.style.lineHeight=30+"px";
		var btntop=document.getElementsByClassName("btn-top");
		btntop.toArray().forEach(function (curr,index) {
			curr.style.marginTop=-(8+btnuploaddiv.offsetHeight/2)+"px";
		});

		this.wrap.style.height=this.content.offsetHeight+"px";
		// document.getElementById("canv").style.height=document.documentElement.clientHeight+"px";
		if(document.body.offsetWidth>544){
			this.wrap.style.height=this.avaiH+'px';
			this.navLis[0].style.width=wwidth*(1/10)+'px';
			this.navLis[1].style.width=wwidth*(1/12)+'px';
			this.navLis[1].style.marginRight=wwidth*(1/10)+'px';
			this.navLis[this.navLis.length-1].style.width=wwidth*(1/10)+'px';
			this.navLis[this.navLis.length-1].style.marginLeft=wwidth*(1/15)+'px';
			//中间的人脸识别，人脸检测，姿态检测项总宽度占浏览器宽度的4/10
			var mainNavWidth=wwidth*(4/10);
			this.mainNavLis.toArray().forEach(function(curr,index){
				curr.style.width=mainNavWidth/3+'px';
			});
			//侧边导航
			// alert(wwidth*(2/10)+wwidth*(7/10));
			this.navSide.style.width=wwidth*(2/10)+"px";
			this.navSide.style.height=this.avaiH-this.nav.offsetHeight-10+"px";
			// content
			this.content.style.width=wwidth*(8/10)-18+"px";
			this.content.style.height=this.avaiH-this.nav.offsetHeight-10+"px";
			// this.imgDiv.style.height=this.imgDiv.offsetWidth+'px';
			this.contentParts.toArray().forEach(function(curr,index){
				curr.style.height=0+"px";
				curr.style.width=_this.content.offsetWidth+"px";
			});
			document.getElementsByClassName("active")[0].style.height=this.navSide.offsetHeight+"px";
			this.activeLi.style.height=80+"PX";
			this.activeLi.style.lineHeight=80+"PX";
			this.activeLi.style.backgroundColor="rgb(42, 48, 60)";
			this.activeLi.style.color="white";
			// 立即使用页面上传图片btn以及预览、结果区域
			this.recoResultWrap.style.width=this.content.offsetWidth*(3/5)+"px";
			this.recoResultWrap.style.height=250+"px";
			this.recoResultWrap.style.margin="70px auto";
			this.getPicsArea[0].style.marginRight=(this.recoResultWrap.offsetWidth-404)+"px";
		}else if(document.body.offsetWidth<=544){
			var nav=document.getElementsByClassName("nav")[0];
			var navUl=document.getElementsByClassName("nav-ul")[0];
			navUl.children[0].style.display="none";
			navUl.children[1].style.display="none";
			navUl.style.transition="all 500ms";
			document.getElementsByClassName("menu")[0].style.display="block";
			var menutag=document.getElementsByClassName("menu")[0];
			var menuspan=menutag.children[1];
			// alert(document.documentElement.clientHeight);
			// this.bgDiv.style.height=document.documentElement.clientHeight+"px";
			// document.getElementById("canv").style.height=document.documentElement.clientHeight+"px";
			btnuploaddiv.style.marginLeft=(wwidth-btnuploaddiv.offsetWidth)/2+"px";
			menuspan.addEventListener("click",function(){
				if(new RegExp("justify").test(menutag.children[1].className)){
						navUl.style.display="block";
						navUl.style.zIndex=201;
						_this.content.style.position="absolute";
						_this.content.style.zIndex=1;
						menutag.children[1].className="glyphicon glyphicon-remove";
				}
				else if(new RegExp("remove").test(menutag.children[1].className)){
						navUl.style.display="none";
						menutag.children[1].className="glyphicon glyphicon-align-justify";
				}
			});
			window.addEventListener("mouseover",function(e){
				var e=e||window.event;
				// console.log(e.target);
			});
			// var targetname=
		}
		if(document.body.clientWidth<785){
			this.getPicsArea[0].style.margin="0 auto";
			this.getPicsArea[0].style.marginLeft=0+"px";
			this.navSide.style.width="100%";
		}
		
	}	
};
(function () {
	page.init();
})();
